<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Destry - Fashion eCommerce HTML Template</title>
    <!-- Favicons -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <link rel="stylesheet" href="assets/css/vendor.min.css">
    <link rel="stylesheet" href="assets/css/plugins.min.css">
    <link rel="stylesheet" href="assets/css/style.min.css">
    <link rel="stylesheet" href="assets/css/swiper.min.css">
    <script src="assets/js/swiper.min.js"></script>
    <script src="assets/js/template-web.js"></script>
    <link href="//cdn.bootcss.com/video.js/7.0.0-alpha.1/alt/video-js-cdn.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/video.js/7.0.0-alpha.1/video.min.js"></script>
    <style>
        html, body {
            position: relative;
            height: 100%;
        }
        body {
            background: #eee;
            font-family: sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }
        .swiper-container {
            width: 100%;
            height: 100%;
            background-color: rgb(179, 189, 196);
            transition: 1s background-color 1.3s;
        }
        .swiper-wrapper {
            transition-delay: 1s;
            transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .title {
            transition-delay: 1s;
            z-index: 10;
        }
        .title h3 {
            font-weight: 700;
            font-size: calc(55px + 54 * ((53vw + 53vh) - 520px) / 820);
            letter-spacing: -1px;
            color: rgba(255,255,255,0);
            -webkit-text-stroke: 2px #fff;
        }
        .img-box {
            width: 100%;
            height: 100%;
            position: absolute;
            transform: scale(0.6, 0.6);
            transition-duration: 1s;
            transition-property: transform;
            transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
            opacity: 0.9;
            overflow: hidden;
        }
        .img-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1.2, 1.2) translateX(50%);
            transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
            transition-property: transform;
        }
        .button-prev, .button-next {
            transition: 0.5s;
            outline: none;
            position: absolute;
            width: 140px;
            z-index: 10;
            top: 65vh;
            transform: translateY(-34px);
            cursor: pointer;
        }
        .button-prev {
            left: 4vw;
        }
        .button-next {
            right: 4vw;
        }
        .button.disabled {
            opacity: 0.2;
            cursor: default;
        }
        #arrow-svg-home {
            transform: translateY(353px);
        }
        .button-next #arrow-svg-home {
            transform: translateY(353px) rotateY(180deg);
            transform-origin: 80px 0px 0px;
        }
        svg {
            transition: 0.5s;
        }
        .cls-1 {
            transition: 0.5s;
            opacity: 0.4;
            transform-origin: -20px 40px;
            opacity: 1;
        }
        .cls-4 {
            transition: 0.5s;
            stroke-width: 2px;
            stroke: #fff;
            fill: none;
            stroke-dasharray: 1;
            stroke-dashoffset: 1;
            opacity: 0.4;
            transform-origin: 0px 0px 0px;
        }
        #arrow-trg {
            transition: 0.5s;
            fill: #fff;
            transform: rotateY(180deg) translate(-53px, 39px);
        }
        #line {
            transition: 0.5s;
            stroke: #fff;
            transform: translate(50px, 42px);
        }
        .button-prev:not(.disabled):hover svg {
            transform: translateX(-25px);
        }
        .button-next:not(.disabled):hover svg {
            transform: translateX(25px);
        }
        .button:not(.disabled):hover .cls-1 {
            transform: scale(1.1);
        }
        .button:not(.disabled):hover .cls-4 {
            stroke-dasharray: 2px;
            stroke-dashoffset: 2px;
            opacity: 1;
        }
        .button:not(.disabled):hover #arrow-trg {
            transform: rotateY(180deg) translate(-37px, 39px);
        }
        .button:not(.disabled):hover #line {
            transform: translate(35px, 42px) scaleX(0.33);
        }
    </style>

</head>

<body>
    <div class="header section">

        <!-- Header Bottom Start -->
        <div class="header-bottom">
            <div class="header-sticky">
                <div class="container">
                    <div class="row align-items-center">

                        <!-- Header Logo Start -->
                        <div class="col-xl-2 col-6">
                            <div class="header-logo">
                                <a href="index.html"><img width="105" src="assets/images/logo/log.png" alt="Site Logo" /></a>
                            </div>
                        </div>
                        <!-- Header Logo End -->

                        <!-- Header Menu Start -->
                        <div class="col-xl-8 d-none d-xl-block" id="header">
                            <div class="main-menu position-relative">
                                <ul>

                                    <li class="has-children">
                                        <a href="index.html"><span>首页</span></a>
                                    </li>
                                    <li class="has-children position-static">
                                        <a href="about.html"><span>公司简介</span></a>
                                    </li>
                                    <li class="has-children">
                                        <a href="#"><span>婚纱套系</span> <i class="fa fa-angle-down"></i></a>

                                        <ul class="sub-menu" id="wedding_dress_l">
                                        </ul>
                                    </li>
                                    <li class="has-children">
                                        <a href="#"><span>金牌团队</span> <i class="fa fa-angle-down"></i></a>
                                        <ul class="sub-menu" id="team">
                                        </ul>
                                    </li>
                                    <li class="has-children">
                                        <a href="#"><span>作品展示</span> <i class="fa fa-angle-down"></i></a>
                                        <ul class="sub-menu" id="work_show">

                                        </ul>
                                    </li>
                                    <li><a href="message.html"> <span>热点咨询</span></a></li>
                                    <li><a href="wishlist.html"> <span>预约</span></a></li>
                                </ul>
                            </div>



                        </div>
                        <!-- Header Menu End -->

                        <!-- Header Action Start -->
                        <div class="col-xl-2 col-6" id="right-header">

                        </div>
                        <!-- Header Action End -->

                    </div>
                </div>
            </div>
        </div>
        <!-- Header Bottom End -->

        <!-- Mobile Menu Start -->
        <div class="mobile-menu-wrapper">
            <div class="offcanvas-overlay"></div>

            <!-- Mobile Menu Inner Start -->
            <div class="mobile-menu-inner">

                <!-- Button Close Start -->
                <div class="offcanvas-btn-close">
                    <i class="pe-7s-close"></i>
                </div>
                <!-- Button Close End -->

                <!-- Mobile Menu Start -->
                <div class="mobile-navigation">
                    <nav>
                        <ul class="mobile-menu">
                            <li class="has-children">
                                <a href="#">Home <i class="fa fa-angle-down"></i></a>
                                <ul class="dropdown">
                                    <li><a href="index.html">Home One</a></li>
                                    <li><a href="index-2.html">Home Two</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Shop <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="shop-grid.html">Shop Grid</a></li>
                                    <li><a href="shop-left-sidebar.html">Shop Left Sidebar</a></li>
                                    <li><a href="shop-right-sidebar.html">Shop Right Sidebar</a></li>
                                    <li><a href="shop-list-fullwidth.html">Shop List Fullwidth</a></li>
                                    <li><a href="shop-list-left-sidebar.html">Shop List Left Sidebar</a></li>
                                    <li><a href="shop-list-right-sidebar.html">Shop List Right Sidebar</a></li>
                                    <li><a href="wishlist.html">Wishlist</a></li>
                                    <li><a href="cart.html">Shopping Cart</a></li>
                                    <li><a href="checkout.html">Checkout</a></li>
                                    <li><a href="compare.html">Compare</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Product <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="single-product.html">Single Product</a></li>
                                    <li><a href="single-product-sale.html">Single Product Sale</a></li>
                                    <li><a href="single-product-group.html">Single Product Group</a></li>
                                    <li><a href="single-product-normal.html">Single Product Normal</a></li>
                                    <li><a href="single-product-affiliate.html">Single Product Affiliate</a></li>
                                    <li><a href="single-product-slider.html">Single Product Slider</a></li>
                                    <li><a href="single-product-gallery-left.html">Gallery Left</a></li>
                                    <li><a href="single-product-gallery-right.html">Gallery Right</a></li>
                                    <li><a href="single-product-tab-style-left.html">Tab Style Left</a></li>
                                    <li><a href="single-product-tab-style-right.html">Tab Style Right</a></li>
                                    <li><a href="single-product-sticky-left.html">Sticky Left</a></li>
                                    <li><a href="single-product-sticky-right.html">Sticky Right</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Pages <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="about.html">About Us</a></li>
                                    <li><a href="contact.html">Contact</a></li>
                                    <li><a href="faq.html">Faq</a></li>
                                    <li><a href="404-error.html">Error 404</a></li>
                                    <li><a href="my-account.html">My Account</a></li>
                                    <li><a href="login-register.html">Loging | Register</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Blog <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="blog.html">Blog</a></li>
                                    <li><a href="blog-left-sidebar.html">Blog Left Sidebar</a></li>
                                    <li><a href="blog-right-sidebar.html">Blog Right Sidebar</a></li>
                                    <li><a href="blog-details.html">Blog Details</a></li>
                                    <li><a href="blog-details-sidebar.html">Blog Details Sidebar</a></li>
                                </ul>
                            </li>
                            <li><a href="about.html">About</a></li>
                            <li><a href="contact.html">Contact</a></li>
                        </ul>
                    </nav>
                </div>
                <!-- Mobile Menu End -->

                <!-- Language, Currency & Link Start -->
                <div class="offcanvas-lag-curr mb-6">
                    <h2 class="title">Languages</h2>
                    <div class="header-top-lan-curr-link">
                        <div class="header-top-lan dropdown">
                            <button class="dropdown-toggle" data-bs-toggle="dropdown">English <i class="fa fa-angle-down"></i></button>
                            <ul class="dropdown-menu dropdown-menu-right animate slideIndropdown">
                                <li><a class="dropdown-item" href="#">English</a></li>
                                <li><a class="dropdown-item" href="#">Japanese</a></li>
                                <li><a class="dropdown-item" href="#">Arabic</a></li>
                                <li><a class="dropdown-item" href="#">Romanian</a></li>
                            </ul>
                        </div>
                        <div class="header-top-curr dropdown">
                            <button class="dropdown-toggle" data-bs-toggle="dropdown">USD <i class="fa fa-angle-down"></i></button>
                            <ul class="dropdown-menu dropdown-menu-right animate slideIndropdown">
                                <li><a class="dropdown-item" href="#">USD</a></li>
                                <li><a class="dropdown-item" href="#">Pound</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- Language, Currency & Link End -->

                <!-- Contact Links/Social Links Start -->
                <div class="mt-auto">

                    <!-- Contact Links Start -->
                    <ul class="contact-links">
                        <li><i class="fa fa-phone"></i><a href="#"> +012 3456 789 123</a></li>
                        <li><i class="fa fa-envelope-o"></i><a href="#"> info@example.com</a></li>
                        <li><i class="fa fa-clock-o"></i> <span>Monday - Sunday 9.00 - 18.00</span> </li>
                    </ul>
                    <!-- Contact Links End -->

                    <!-- Social Widget Start -->
                    <div class="widget-social">
                        <a title="Facebook" href="#"><i class="fa fa-facebook-f"></i></a>
                        <a title="Twitter" href="#"><i class="fa fa-twitter"></i></a>
                        <a title="Linkedin" href="#"><i class="fa fa-linkedin"></i></a>
                        <a title="Youtube" href="#"><i class="fa fa-youtube"></i></a>
                        <a title="Vimeo" href="#"><i class="fa fa-vimeo"></i></a>
                    </div>
                    <!-- Social Widget Ende -->
                </div>
                <!-- Contact Links/Social Links End -->
            </div>
            <!-- Mobile Menu Inner End -->
        </div>
        <!-- Mobile Menu End -->

        <!-- Offcanvas Search Start -->
        <div class="offcanvas-search">
            <div class="offcanvas-search-inner">

                <!-- Button Close Start -->
                <div class="offcanvas-btn-close">
                    <i class="pe-7s-close"></i>
                </div>
                <!-- Button Close End -->

                <!-- Offcanvas Search Form Start -->
                <form class="offcanvas-search-form" action="#">
                    <input type="text" placeholder="Search Product..." class="offcanvas-search-input">
                </form>
                <!-- Offcanvas Search Form End -->

            </div>
        </div>
        <!-- Offcanvas Search End -->

        <!-- Cart Offcanvas Start -->
        <div class="cart-offcanvas-wrapper">
            <div class="offcanvas-overlay"></div>

            <!-- Cart Offcanvas Inner Start -->
            <div class="cart-offcanvas-inner">

                <!-- Button Close Start -->
                <div class="offcanvas-btn-close">
                    <i class="pe-7s-close"></i>
                </div>
                <!-- Button Close End -->

                <!-- Offcanvas Cart Content Start -->
                <div class="offcanvas-cart-content">
                    <!-- Offcanvas Cart Title Start -->
                    <h2 class="offcanvas-cart-title mb-10">Shopping Cart</h2>
                    <!-- Offcanvas Cart Title End -->

                    <!-- Cart Product/Price Start -->
                    <div class="cart-product-wrapper mb-6">

                        <!-- Single Cart Product Start -->
                        <div class="single-cart-product">
                            <div class="cart-product-thumb">
                                <a href="single-product.html"><img src="assets/images/products/small-product/1.jpg" alt="Cart Product"></a>
                            </div>
                            <div class="cart-product-content">
                                <h3 class="title"><a href="single-product.html">Brother Hoddies in Grey</a></h3>
                                <span class="price">
								<span class="new">$38.50</span>
                                <span class="old">$40.00</span>
                                </span>
                            </div>
                        </div>
                        <!-- Single Cart Product End -->

                        <!-- Product Remove Start -->
                        <div class="cart-product-remove">
                            <a href="#"><i class="fa fa-trash"></i></a>
                        </div>
                        <!-- Product Remove End -->

                    </div>
                    <!-- Cart Product/Price End -->

                    <!-- Cart Product/Price Start -->
                    <div class="cart-product-wrapper mb-6">

                        <!-- Single Cart Product Start -->
                        <div class="single-cart-product">
                            <div class="cart-product-thumb">
                                <a href="single-product.html"><img src="assets/images/products/small-product/2.jpg" alt="Cart Product"></a>
                            </div>
                            <div class="cart-product-content">
                                <h3 class="title"><a href="single-product.html">Basic Jogging Shorts</a></h3>
                                <span class="price">
								<span class="new">$14.50</span>
                                <span class="old">$18.00</span>
                                </span>
                            </div>
                        </div>
                        <!-- Single Cart Product End -->

                        <!-- Product Remove Start -->
                        <div class="cart-product-remove">
                            <a href="#"><i class="fa fa-trash"></i></a>
                        </div>
                        <!-- Product Remove End -->

                    </div>
                    <!-- Cart Product/Price End -->

                    <!-- Cart Product/Price Start -->
                    <div class="cart-product-wrapper mb-6">

                        <!-- Single Cart Product Start -->
                        <div class="single-cart-product">
                            <div class="cart-product-thumb">
                                <a href="single-product.html"><img src="assets/images/products/small-product/3.jpg" alt="Cart Product"></a>
                            </div>
                            <div class="cart-product-content">
                                <h3 class="title"><a href="single-product.html">Enjoy The Rest T-Shirt</a></h3>
                                <span class="price">
								<span class="new">$20.00</span>
                                <span class="old">$21.00</span>
                                </span>
                            </div>
                        </div>
                        <!-- Single Cart Product End -->

                        <!-- Product Remove Start -->
                        <div class="cart-product-remove">
                            <a href="#"><i class="fa fa-trash"></i></a>
                        </div>
                        <!-- Product Remove End -->

                    </div>
                    <!-- Cart Product/Price End -->

                    <!-- Cart Product Total Start -->
                    <div class="cart-product-total">
                        <span class="value">Subtotal</span>
                        <span class="price">220$</span>
                    </div>
                    <!-- Cart Product Total End -->

                    <!-- Cart Product Button Start -->
                    <div class="cart-product-btn mt-4">
                        <a href="cart.html" class="btn btn-dark btn-hover-primary rounded-0 w-100">View cart</a>
                        <a href="checkout.html" class="btn btn-dark btn-hover-primary rounded-0 w-100 mt-4">Checkout</a>
                    </div>
                    <!-- Cart Product Button End -->

                </div>
                <!-- Offcanvas Cart Content End -->

            </div>
            <!-- Cart Offcanvas Inner End -->
        </div>
        <!-- Cart Offcanvas End -->

    </div>


    <!-- Blog Details Section End -->
    <!--轮播图-->
    <div class="swiper-container">
        <div class="swiper-wrapper" id="image">

        </div>
        <div class="button-prev button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 350 160 90">
            <g id="arrow-svg-home">
                <g id="circ" class="cls-1">
                    <circle cx="42" cy="42" r="40" class="cls-4"></circle>
                </g>
                <g id="arrow">
                    <path id="arrow-trg" d="M.983,6.929,4.447,3.464.983,0,0,.983,2.482,3.464,0,5.946Z"></path>
                </g>
                <path id="line" d="M120,0H0" class="cls-3" ></path>
            </g>
        </svg></div>
        <!--左箭头-->
        <div class="button-next button"> <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 350 160 90">
            <g id="arrow-svg-home">
                <g id="circ" class="cls-1">
                    <circle  cx="42" cy="42" r="40" class="cls-4"></circle>
                </g>
                <g id="arrow">
                    <path id="arrow-trg" d="M.983,6.929,4.447,3.464.983,0,0,.983,2.482,3.464,0,5.946Z" class="cls-2"></path>
                </g>
                <path id="line" d="M120,0H0" class="cls-3" ></path>
            </g>
        </svg></div>
        <!--右箭头-->
    </div>
    <!--视频-->
    <div id="video">
        <div style="width: 960px;height: auto; margin:20px auto;">
            <video controls="controls" width="960" height="400">
                <source src="http://127.0.0.1:8080/profile/upload/2021/03/07/53ded0e2-def1-4533-9bb1-108b68797c3d.mp4"></source>
            </video>
        </div>

        <div style="width: 960px;height: auto; margin:20px auto;">
            <video controls="controls"  width="960" height="400">
                <source src="http://127.0.0.1:8080/profile/upload/2021/03/07/53ded0e2-def1-4533-9bb1-108b68797c3d.mp4"></source>
            </video>

        </div>

    </div>

    <!-- Footer Section Start -->
    <footer class="section footer-section">

        <!-- Footer Top Start -->
        <div class="footer-top section-padding">
            <div class="container">
                <div class="row mb-n10">

                    <div class="col-12 col-sm-6 col-lg-2 col-xl-2 mb-10" data-aos="fade-up" data-aos-delay="300">
                        <div class="single-footer-widget">
                            <h2 class="widget-title">友情链接</h2>
                            <ul class="widget-list">
                                <li><a href="http://www.milan520.com/">米兰婚纱摄影</a></li>
                                <li><a href="https://www.bj520.com/">伯爵旅拍</a></li>
                                <li><a href="http://lovesfy.shop.liebiao.com/">苏菲雅婚纱摄影</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer Top End -->

        <!-- Footer Bottom Start -->
        <div class="footer-bottom">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-12 text-center">
                        <div class="copyright-content">
                            <p class="mb-0">Copyright © 2021 <a href="#">jq22</a> All Rights Reserved.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- Footer Section End -->

    <!-- Scroll Top Start -->
    <a href="#" class="scroll-top" id="scroll-top">
        <i class="arrow-top fa fa-long-arrow-up"></i>
        <i class="arrow-bottom fa fa-long-arrow-up"></i>
    </a>
    <!-- Scroll Top End -->


    <script src="assets/js/vendor.min.js"></script>
    <script src="assets/js/plugins.min.js"></script>

    <script src="assets/js/main.js"></script>



    <script type="text/html" id="image_script">
        {{each data.imageListOb as item i}}
        <div class="swiper-slide swiper-slide-active">
            <div class="title" data-swiper-parallax="-130%">
                <h3></h3>
            </div>
            <div class="img-box"><img src="{{data.httpUrl}}{{item}}" style="transform:translateX(0);"></div>
        </div>
        {{/each}}
    </script>
    <script type="text/html" id="video_script">
        {{each data.videoListOb as item i}}
        <div style="width: 960px;height: auto; margin:20px auto;">
            <video controls="controls" width="960" height="400">
                <source src="{{data.httpUrl}}{{item}}"></source>
            </video>
        </div>
        {{/each}}
    </script>

    <!--获取婚纱套系-->
    <script type="text/html" id="wedding_dress">
        {{each data item i}}
        <li><a href="single-product.html?id={{item.id}}">{{item.name}}</a></li>
        {{/each}}
    </script>

    <script type="text/html" id="team_script">
        {{each data item i}}
        <li><a href="blog-details.html?id={{item.id}}">{{item.name}}</a></li>
        {{/each}}
    </script>

    <script type="text/html" id="work_show_script">
        {{each data item i}}
        <li><a href="show.html?id={{item.id}}">{{item.name}}</a></li>
        {{/each}}
    </script>
    <script src="config/config.js"></script>
<script>

    $(document).ready(function(){
        $("#footer").load("footer.html");
        $("#right-header").load("right-header.html");
        getWeddingDress();
        getTeam();
        getWorkShow();
    });
    var id = getQueryVariable("id");

    //获取团队详细信息
    function getWorkShowDetail() {
        $.ajax({
            url:httpUrl+'/api/getWorkShowDetail/'+id,
            type:'get',
            success:function (res) {
                console.log(res);
                res.data.httpUrl = httpUrl;

                var html1 = template('image_script', {data:res.data});
                document.querySelector('#image').innerHTML = html1;
                lunbo();
                var html2 = template('video_script', {data:res.data});
                document.querySelector('#video').innerHTML = html2;
            }
        });
    }
    //获取url参数
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }


</script>
<script>
    getWorkShowDetail();
    function lunbo(){
        //转载请标注版权 Swiper中文网 www.swiper.com.cn
        lock = false;
        bgColor = ["rgb(179, 189, 196)","rgb(180, 183, 166)","rgb(140, 152, 187)"]; //背景色
        var mySwiper = new Swiper('.swiper-container',{
            speed: 1300,
            allowTouchMove: false,//禁止触摸滑动
            parallax : true,  //文字位移视差
            on:{
                transitionStart: function(){
                    lock = true;//锁住按钮
                    slides = this.slides
                    imgBox = slides.eq(this.previousIndex).find('.img-box') //图片包装器
                    imgPrev = slides.eq(this.previousIndex).find('img')  //当前图片
                    imgActive = slides.eq(this.activeIndex).find('img')  //下一张图片
                    derection = this.activeIndex-this.previousIndex
                    this.$el.css("background-color",bgColor[this.activeIndex]);//背景颜色动画

                    imgBox.transform('matrix(0.6, 0, 0, 0.6, 0, 0)');
                    imgPrev.transition(1000).transform('matrix(1.2, 0, 0, 1.2, 0, 0)');//图片缩放视差
                    this.slides.eq(this.previousIndex).find('h3').transition(1000).css('color','rgba(255,255,255,0)');//文字透明动画

                    imgPrev.transitionEnd(function () {
                        imgActive.transition(1300).transform('translate3d(0, 0, 0) matrix(1.2, 0, 0, 1.2, 0, 0)');//图片位移视差
                        imgPrev.transition(1300).transform('translate3d('+60*derection+'%, 0, 0)  matrix(1.2, 0, 0, 1.2, 0, 0)');
                    });
                },
                transitionEnd: function(){
                    this.slides.eq(this.activeIndex).find('.img-box').transform(' matrix(1, 0, 0, 1, 0, 0)');
                    imgActive = this.slides.eq(this.activeIndex).find('img')
                    imgActive.transition(1000).transform(' matrix(1, 0, 0, 1, 0, 0)');
                    this.slides.eq(this.activeIndex).find('h3').transition(1000).css('color','rgba(255,255,255,1)');

                    imgActive.transitionEnd(function () {
                        lock = false
                    });
                    //第一个和最后一个，禁止按钮
                    if(this.activeIndex == 0){
                        this.$el.find('.button-prev').addClass('disabled');
                    }else{
                        this.$el.find('.button-prev').removeClass('disabled');
                    }

                    if(this.activeIndex == this.slides.length - 1){
                        this.$el.find('.button-next').addClass('disabled');
                    }else{
                        this.$el.find('.button-next').removeClass('disabled');
                    }
                },
                init:function(){
                    this.emit('transitionEnd');//在初始化时触发一次transitionEnd事件
                },

            }
        });

        //不使用自带的按钮组件，使用lock控制按钮锁定时间
        mySwiper.$el.find('.button-next').on('click',function(){
            if(!lock){
                mySwiper.slideNext();
            }
        })
        mySwiper.$el.find('.button-prev').on('click',function(){
            if(!lock){
                mySwiper.slidePrev();
            }
        })
    }

</script>
    <script>
        //获取婚纱套系
        function getWeddingDress() {
            $.ajax({
                url:httpUrl+'/api/getWeddingDress',
                type:'get',
                success:function (res) {
                    console.log(res);
                    var html = template('wedding_dress', {data:res.data});
                    document.querySelector('#wedding_dress_l').innerHTML = html
                }
            });
        }

        //获取金牌团队信息
        function getTeam() {
            $.ajax({
                url:httpUrl+'/api/getTeam',
                type:'get',
                success:function (res) {
                    console.log(res);
                    var html = template('team_script', {data:res.data});
                    document.querySelector('#team').innerHTML = html
                }
            });
        }
        //获取作品
        function getWorkShow() {
            $.ajax({
                url:httpUrl+'/api/getWorkShow',
                type:'get',
                success:function (res) {
                    console.log(res);
                    var html = template('work_show_script', {data:res.data});
                    document.querySelector('#work_show').innerHTML = html
                }
            });
        }
    </script>

</body>

</html>